<template>
  <div id='store_group'>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">名称:</span>
            <Input v-model="shopNameLike" placeholder="请输入"></Input>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="doReset">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button class="search-btn" type="primary" @click="skipDetail('')" v-if="hasPermission('moms:shop:shoplabelview')">标签管理</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click='skipAdd' v-if="hasPermission('moms:shop:shoplabelcreate')">新建分组</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :loading="loading" :height="tableHeight" :columns="columns" :data="tableData">
      <template slot-scope="{ row }" slot="action">
        <i class="iconsys icondetail" title="查看" @click='skipDetail(row)' v-if="hasPermission('moms:shop:shoplabelview')"></i>
        <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)' v-if="hasPermission('moms:shop:shoplabelupdate')"></i>
        <Poptip confirm title="确认删除此分组吗？" transfer @on-ok='delGroup(row)' style="text-align:left">
          <i class="iconsys icondel" title="删除" v-if="hasPermission('moms:shop:shoplabeldelete')"></i>
        </Poptip>
      </template>
    </Table>
    <div class="page-box" style="margin-top: 20px">
      <Page :total="searchObj.total"
            :current="searchObj.pageIndex"
            :page-size="searchObj.pageSize"
            @on-change="changePageIndex"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total />
    </div>
  </div>
</template>

<script>
import { groupList, delTag } from '@/api/system/tag'
export default {
  name: 'store_group',
  computed: {
    tableHeight () {
      return this.tableData.length > 10 ? 520 : 0
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'store_group') {
        this.getData()
      }
    }
  },
  data () {
    return {
      loading: false,
      shopNameLike: '',
      searchObj: {
        shopNameLike: '',
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80
        },
        {
          title: '业务标签分组',
          key: 'shopTagName'
        },
        {
          title: '操作人',
          key: 'modifier'
        },
        {
          title: '最近操作时间',
          key: 'modifyAt'
        }
        // {
        //   title: '操作',
        //   slot: 'action'
        // }
      ]
    }
  },
  mounted () {
    this.getData()
    if (this.hasPermission(['moms:shop:shoplabelview', 'moms:shop:shoplabelupdate', 'moms:shop:shoplabeldelete'])) {
      this.columns.push({
        title: '操作',
        slot: 'action'
      })
    }
  },
  methods: {
    doSearch () {
      this.searchObj.shopNameLike = this.shopNameLike
      this.searchObj.pageIndex = 1
      this.getData()
    },
    doReset () {
      this.shopNameLike = ''
      this.searchObj = {
        shopNameLike: '',
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
      this.getData()
    },
    skipAdd () {
      this.$router.push({ name: 'create_group' })
    },
    skipDetail (row) {
      this.$router.push({ name: 'store_tag', query: { id: row.shopTagId } })
    },
    skipEdit (row) {
      this.$router.push({ name: 'edit_group', params: { id: row.shopTagId }, query: { name: row.shopTagName } })
    },
    delGroup (row) {
      delTag({ shopTagId: row.shopTagId }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功!')
          this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    changePageIndex (index) {
      this.searchObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.searchObj.pageSize = size
      this.searchObj.pageIndex = 1
      this.getData()
    },
    getData () {
      groupList({
        merchantId: this.$store.state.user.merchantId,
        shopTagName: this.searchObj.shopNameLike,
        level: 1,
        offset: this.searchObj.pageSize * (this.searchObj.pageIndex - 1),
        limit: this.searchObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.searchObj.total = result.totalCount
          if (result.data.length / this.searchObj.pageSize === 0) {
            if (this.searchObj.pageIndex > 1) {
              this.searchObj.pageIndex--
              this.getData()
            }
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  }
}
</script>

<style lang='less'>
#store_group{
  .search-box {
    .search-item-left {
      width: 80%;
    }
    .search-item-right {
      width: 20%;
    }
  }
}
</style>
